<template>
	<div class="search">
		<Card>
			<Row class="operation padding-row">
				<Button @click="addCredit" type="primary">添加折扣设置 </Button>
			</Row>
			<Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
			<Row type="flex" justify="end" class="mt_10">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row>
		</Card>
		<!-- 新增/编辑 -->
		<Modal v-model="detailFlag" :title="title" @on-ok="handleSubmit" @on-cancel="handleCancel">
			<div>
				<Form ref="form" :model="form" :label-width="100">
					<FormItem label="角色" prop="roleId">
						<Select :loading="userLoading" not-found-text="暂无角色" v-model="form.roleId"
							@on-change="roleChange">
							<Option v-for="item in users" :value="item.id" :key="item.id">{{
                item.name
              }}</Option>
						</Select>
					</FormItem>
					<FormItem label="充值折扣" prop="rechargeRule">
						<Input v-model="form.rechargeRule" type="number" />
					</FormItem>
					<FormItem label="提现折扣" prop="withdrawalRate">
						<Input v-model="form.withdrawalRate" type="number" />
					</FormItem>
					<FormItem label="会员费费率" prop="membershipRate">
						<Input v-model="form.membershipRate" type="number" />
					</FormItem>
          <FormItem label="合伙人会费" prop="partnerPrice">
          	<Input v-model="form.partnerPrice" type="number" />
          </FormItem>
					<FormItem label="交易流水折扣" prop="flowRate">
						<Input v-model="form.flowRate" type="number" />
					</FormItem>
					<FormItem label="状态" prop="enableState">
						<i-switch size="large" v-model="form.enableState">
							<span slot="open">启用</span>
							<span slot="close">冻结</span>
						</i-switch>
					</FormItem>
				</Form>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		getRateSettingList,
		addRateSetting,
		delRateSetting,
		editRateSetting,
	} from "@/api/commission.js";
	import {
		getRoleList
	} from "@/api/index";

	export default {
		name: "rate-setting",
		data() {
			return {
				loading: true, // 表单加载状态
				userLoading: false, // 选择角色加载状态
				detailFlag: false,
				title: "新增", //弹窗title
				searchForm: {
					// 请求参数
					pageNumber: 1,
					pageSize: 10,
					order: "desc",
				},
				form: {
					roleId: "", //角色ID
					roleName: "", //角色名称
					rechargeRule: "", //充值折扣
					withdrawalRate: "", //提现折扣
					membershipRate: "", //会员费率
					enableState: true, //状态，1：启用，0：冻结
					flowRate: "", //流水费率
				},
				EditObj: null,
				columns: [{
						title: "角色",
						key: "roleName",
						tooltip: true,
					},
					{
						title: "充值折扣",
						key: "rechargeRule",
					},
					{
						title: "提现折扣",
						key: "withdrawalRate",
					},

					{
						title: "会员费费率",
						align: "left",
						key: "membershipRate",
					},
					// {
					//   title: "合伙人费率",
					//   align: "left",
					//   key: "membershipRate",
					// },
					{
						title: "流水折扣",
						align: "left",
						key: "flowRate",
					},
					{
					  title: "合伙人会费",
					  align: "left",
					  key: "partnerPrice",
					},
					{
						title: "状态",
						align: "left",
						render: (h, params) => {
							return h(
								"div", {},
								params.row.enableState == 1 ?
								"启用" :
								params.row.enableState == 0 ?
								"冻结" :
								""
							);
						},
					},
					{
						title: "操作",
						key: "action",
						align: "center",
						width: 200,
						fixed: "right",
						render: (h, params) => {
							return h(
								"div", {
									style: {
										display: "flex",
										justifyContent: "center",
									},
								},
								[
									h(
										"Button", {
											props: {
												type: "info",
												size: "small",
											},
											style: {
												marginRight: "5px",
											},
											on: {
												click: () => {
													this.edit(params.row);
												},
											},
										},
										"编辑"
									),
									// h(
									//   "Button",
									//   {
									//     props: {
									//       type: "info",
									//       size: "small",
									//     },
									//     style: {
									//       marginRight: "5px",
									//     },
									//     on: {
									//       click: () => {
									//         this.del(params.row);
									//       },
									//     },
									//   },
									//   "删除"
									// ),
								]
							);
						},
					},
				],
				data: [], // 表单数据
				total: 0, // 表单数据总数
				users: [],
			};
		},
		methods: {
			roleChange(val) {
				let user = this.users.find((item) => item.id == val);
				if (user) {
					this.form.roleName = user.name;
				}
			},
			// 获取角色列表
			getRoles() {
				getRoleList({
					pageNumber: 1,
					pageSize: 10000,
				}).then((res) => {
					this.userLoading = false;
					if (res.success) {
						this.users = res.result.records;
					}
				});
			},
			// 分页 改变页码
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getData();
			},
			// 分页 改变页数
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.searchForm.pageNumber = 1;
				this.getData();
			},
			// 搜索
			handleSearch() {
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.getData();
			},
			//查询费率列表
			getData() {
				getRateSettingList(this.searchForm).then((res) => {
					if (res.result.records) {
						this.loading = false;
						this.data = res.result.records;
						this.total = res.result.total;
					}
				});
			},
			// 新增
			addCredit() {
				this.detailFlag = true;
				this.EditObj = {};
			},
			//编辑
			edit(row) {
				this.detailFlag = true;
				this.EditObj = {
					...row
				};
				this.title = "编辑";
				this.form = this.EditObj;
				this.form.enableState == 1 ?
					(this.form.enableState = true) :
					(this.form.enableState = false);
				// this.$router.push({ name: "member-detail", query: { id: row.id } });
			},
			// 审批提交事件
			handleSubmit() {
				let params = {
					roleId: this.form.roleId, //
					roleName: this.form.roleName,
					rechargeRule: this.form.rechargeRule,
					withdrawalRate: this.form.withdrawalRate,
					membershipRate: this.form.membershipRate,
					enableState: this.form.enableState ? 1 : 0,
					flowRate: this.form.flowRate,
				};
				if (this.EditObj && this.EditObj.id) {
					editRateSetting(this.EditObj.id, params).then((res) => {
						if (res.code == 200) {
							this.$Message.success("修改成功！");
							this.form = {
								roleId: "", //角色ID
								roleName: "", //角色名称
								rechargeRule: "", //充值折扣
								withdrawalRate: "", //提现折扣
								membershipRate: "", //会员费率
								enableState: true, //状态，1：启用，0：冻结
								flowRate: "", //流水费率
							};
							this.title = "新增";
							this.EditObj = {};
							this.$refs.form.resetFields();
							this.getData();
						} else {
							this.$Message.error("修改失败！");
						}
					});
				} else {
					addRateSetting(params).then((res) => {
						if (res.code == 200) {
							this.$Message.success("添加成功！");
							this.form = {
								roleId: "", //角色ID
								roleName: "", //角色名称
								rechargeRule: "", //充值折扣
								withdrawalRate: "", //提现折扣
								membershipRate: "", //会员费率
								enableState: true, //状态，1：启用，0：冻结
								flowRate: "", //流水费率
							};
							this.EditObj = {};
							this.$refs.form.resetFields();
							this.getData();
							this.title = "新增";
						} else {
							this.$Message.error("添加失败！");
						}
					});
				}
			},
			// 审批取消事件
			handleCancel() {
				this.form = {
					roleId: "", //角色ID
					roleName: "", //角色名称
					rechargeRule: "", //充值折扣
					withdrawalRate: "", //提现折扣
					membershipRate: "", //会员费率
					enableState: true, //状态，1：启用，0：冻结
					flowRate: "", //流水费率
				};
				this.title = "新增";
				this.EditObj = {};
				this.$refs.form.resetFields();
			},
			del(row) {
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除商家名称为： " + row.name + "  的授信数据?",
					loading: true,
					onOk: () => {
						delRateSetting(row.id).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("删除成功");
								this.getData();
							}
						});
					},
				});
			},
		},
		mounted() {
			this.getData();
			this.getRoles();
		},
	};
</script>
<style lang="scss" scoped>
	/deep/ .ivu-table-wrapper {
		width: 100%;
	}

	/deep/ .ivu-card {
		width: 100%;
	}

	.face {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.item {
		width: 350px !important;
		display: flex;

		>* {
			margin: 0 4px;
		}
	}
</style>
